<template>
	<uni-collapse-item v-if="casesWithExtra.length > 0" title="相似案例" thumb="https://riddle.miyucaicai.cn/cases.png"
		:open="false">
		<view class="law-list">
			<view v-for="(item, index) in casesWithExtra" :key="item.id" class="law-item"
				@click="navigateToIndex(item.id)">
				<image class="law-image" :src="getImageSrc(item.extra.level)" mode="aspectFill"></image>
				<view class="law-info">
					<text class="law-title">{{ item.title }}</text>
					<view class="law-attributes">
						<text class="law-level">{{ item.extra.level }}</text>
						<text class="law-location">{{ item.extra.location }}</text>
						<text class="law-date">{{ item.extra.date }}</text>
					</view>
				</view>
			</view>
		</view>
	</uni-collapse-item>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';
	import {
		apiGetArticleExtra
	} from "@/api/apis.js";

	const props = defineProps({
		cases: {
			type: Array,
			required: true,
		}
	})

	const casesWithExtra = ref([]);

	const getArticleExtra = async (id) => {
		let res = await apiGetArticleExtra(id);
		return JSON.parse(res.data.extra);
	}

	const fetchAllExtras = async (cases) => {
		const casesPromises = cases.map(async (item) => {
			const extra = await getArticleExtra(item.id);
			return {
				...item,
				extra
			};
		});
		casesWithExtra.value = await Promise.all(casesPromises);
	}

	watch(() => props.cases, (newCases) => {
		fetchAllExtras(newCases);
	}, {
		deep: true,
		immediate: true
	});

	const getImageSrc = (level) => {
		if (level === '仲裁') {
			return 'https://riddle.miyucaicai.cn/0.png';
		} else if (level === '一审') {
			return 'https://riddle.miyucaicai.cn/1.png';
		} else if (level === '二审') {
			return 'https://riddle.miyucaicai.cn/2.png';
		} else {
			return 'https://riddle.miyucaicai.cn/default.png'; // 默认图片
		}
	};

	const navigateToIndex = (id) => {
		uni.navigateTo({
			url: '/pages/notice/detail?articleId=' + id
		});
	};
</script>

<style scoped lang="scss">
	.law-list {
		display: flex;
		flex-direction: column;
	}

	.law-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;
		padding: 10rpx;
		background-color: #fff;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

		.law-image {
			width: 45rpx;
			height: 45rpx;
			background-color: #f6f0f0;
			margin: 0 25rpx 8rpx 0;
			border-radius: 50%;
		}

		.law-info {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			margin-left: 20rpx;
			width: calc(100% - 125rpx);
			height: 125rpx;
			padding: 0 5rpx;

			.law-title {
				font-size: 31rpx;
				font-weight: bold;
				color: #333;
				flex: 2;
			}

			.law-attributes {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;
				flex: 1;

				.law-level,
				.law-location,
				.law-date {
					font-size: 26rpx;
					color: #666;
					margin-top: 5rpx;
				}

				.law-level {
					color: #555;
				}

				.law-location {
					color: #999;
				}

				.law-date {
					color: #777;
				}
			}
		}
	}
</style>